import React, {useEffect, useState} from 'react';
import '../../App.css';
import Navbar from './Navbar';
import WallpaperSector from './WallpaperSector';
import { WallpaperEntity } from "../../components/WallpaperObject";
import {fetchData} from "../../apis/api";
import {Carousel, Flex, Spin} from "antd";
import {useNavigate} from "react-router-dom";

export type WallpaperListType = {
    "currentPage": number
    "totalPage": number
    "offset": number
    "total": number
    "list": WallpaperEntity[]
}
function Page() {

    const [wallpaperResponse, setWallpaper] = useState<WallpaperListType | null>(null);

    const [error, setError] = useState<string | null>(null);
    const [loading, setLoading] = useState<boolean>(true);

    const [searchTag, setSearchTag] = useState<string>("");
    const [page, setPage] = useState<number>(1);
    const navigate = useNavigate();

    // 跳转壁纸详情页
    const jumpDetail = (wallpaperId: number) => {
        navigate('/dialog/'+wallpaperId);
    };
    // 跳转到管理员页面
    const jumpAdmin = () => {
        navigate('/admin/');
    };

    const getWallpaper = async (page: number, searchTag: string) => {
        try {
            setLoading(true);
            const wallpaperRequest = await fetchData('/wallpaper/search/list?offset=12&page=' + page + "&searchStr=" + encodeURIComponent(searchTag));
            setWallpaper(wallpaperRequest);
        } catch (error) {
            setError("获取壁纸数据失败");
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        // page 或者 searchTag 改变的时候，更新wallpaper数据
        getWallpaper(page, searchTag);
    }, [page, searchTag]);

    // 暴露给 WallpaperSector 组件调用的 setPage 函数
    const updatePage = (newPage: number) => {
        setPage(newPage);
    };
    // 暴露给 Navbar 组件调用的 setSearchTag 函数
    const updateSearch = (search: string) => {
        setSearchTag(search);
        setPage(1);
    };

    if (error) {
        return <div>{error}</div>;
    }

    if (!wallpaperResponse || loading){
        return <div className="App">
            <Navbar updateSearch={updateSearch}/>
            <div className="loading">
                <Spin size="large">
                </Spin>
            </div>
        </div>
    }
  return (
    <div className="App">
        <Navbar updateSearch={updateSearch}/>
        <Carousel arrows={true}
                  style={{textAlign:"center",
                    backgroundColor:"rgba(77,88,77,0.5)",
                    borderRadius:"12px"}}
                  autoplay={true}
                  autoplaySpeed={6000}>
            <div>
                <img style={{width:"40vw",height:"25vw",display:"inline-block",
                    marginTop:"10px",marginBottom:"25px", borderRadius:"8px"}}
                     alt={"精选壁纸"}
                    src={"https://img.picknewtab.com/wallpaperTab/wallpaper/6667ad12c97c0815460764da/557959268.jfif"}>

                </img>
            </div>
            <div>

                <img style={{width:"40vw",height:"25vw",display:"inline-block",
                    marginTop:"10px",marginBottom:"25px", borderRadius:"8px"}}
                     alt={"精选壁纸"}
                     src={"https://img.picknewtab.com/wallpaperTab/wallpaper/6667ad12c97c0815460764da/995142257.png"}>

                </img>
            </div>
            <div>

                <img style={{width:"40vw",height:"25vw",display:"inline-block",
                    marginTop:"10px",marginBottom:"25px", borderRadius:"8px"}}
                     alt={"精选壁纸"}
                     src={"https://img.picknewtab.com/wallpaperTab/wallpaper/6667ad12c97c0815460764da/955090086.jpg"}>

                </img>
            </div>
            <div>

                <img style={{width:"40vw",height:"25vw",display:"inline-block",
                    marginTop:"10px",marginBottom:"25px", borderRadius:"8px"}}
                     alt={"精选壁纸"}
                     src={"https://img.picknewtab.com/wallpaperTab/wallpaper/6667ad12c97c0815460764da/493208743.jfif"}>

                </img>
            </div>

        </Carousel>

        <div className="content">
            <WallpaperSector updatePage={updatePage} wallpapers={wallpaperResponse}/>
        </div>
    </div>
  );
}

export default Page;
